<template>
	<uni-transition class="dialog" @click="close" mode-class="fade" :show="showDialog"> 
		<uni-transition class="actInfo" mode-class="slide-bottom" :show="showDialog" @touchstart="touchstart" @touchend="touchmove">	
			<view class="title">
				<view>{{songItem.name}}</view>
				<view></view>
				 
			</view>
			
			<view class="pList">
				<template v-if="playList.length!=0">
					<view v-for="(music,index) in playList">
						<view :class="playingId===music.id?'isPlaying':''" @click.stop="playMusic(music)">
							<view>{{music.title}}</view>
							<view>{{music.singer}} - {{music.album}}</view>
						</view>
						<view @click.stop="removeMusic(index)">
							<cicon name="remove" :size="32"></cicon>
						</view>
					</view>
				</template>
				<template v-else>
					<view style="font-size: 24rpx;opacity: 0.6;">
						没有歌曲 ...
					</view>
				</template>
			</view>
			
		</uni-transition>
	</uni-transition>
</template>

<script>
	export default {
		name:"musicInfo",
		data() {
			return {
				showDialog:false,
				playList:[],
				songItem:[],
				isRemove:0,
				playingId:'',
				startX:0,
				startY:0,
				// #ifdef APP
					prentObj:this.$parent,
				// #endif
				// #ifdef H5
					prentObj:this.$parent.$parent,
				// #endif
			};
			
		},
		methods:{
			touchstart(event) {
			    this.startX = event.changedTouches[0].pageX
			    this.startY = event.changedTouches[0].pageY
			},
			
			touchmove(event) {  
			  
				  var moveEndX = event.changedTouches[0].pageX
				  var moveEndY = event.changedTouches[0].pageY
				  var X = moveEndX - this.startX
				  var Y = moveEndY - this.startY
				  if (Math.abs(X) > Math.abs(Y) && X > 50) {
					 return false
				  } else if (Math.abs(X) > Math.abs(Y) && X < 50) {
					 return false
				  } else if (Math.abs(Y) > Math.abs(X) && Y > 50) {
					 this.close()
				  } else if (Math.abs(Y) > Math.abs(X) && Y < 50) {
					 return false
				  } 
			},
			show(item,songs){
				this.playList = songs
				this.songItem = item
				this.showDialog = true
				this.isRemove = 0
				this.isPlaying()
			},
			close(){
				this.showDialog = false
				if(this.isRemove===1){
					this.prentObj.get_playlist()
				}
			},
			removeMusic(index){
				let parama = {
					offset: index,
					limit: 1,
					id: this.songItem.id,
					songs:'',
				}
				 
				this.$API.updatesongs.request(parama).then((e)=>{
					this.$TOOL.msg('歌曲已从歌单移除') 
					this.playList.splice(index, 1);
					this.isRemove = 1
				})
			},
			
			playMusic(music){ 
				this.prentObj.$refs.mplayer.playMusic(music)
				this.showDialog = false
			},
			isPlaying(){
				let playingMusic = this.$TOOL.data.get('playMusic')
				if(playingMusic){
					this.playingId = playingMusic.id
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	
	.title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 900;
		font-size: 36rpx;
		>view{
			&:last-child{
				font-size: 24rpx;
				font-weight: 400;
				opacity: 0.8;
			}
		}
	} 
	
	.pList{
		margin-top: 40rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx 40rpx;
		max-height: 800rpx;
		overflow-y: auto;
		>view{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			&:last-child{
				margin-bottom: 0;
			}
			>view{
				&:first-child{
					font-size: 28rpx;
					width: 80%;
					>view{
						&:first-child{
							font-weight: 800;
							white-space: nowrap;
							width: 100%; 
							overflow: hidden;
							text-overflow:ellipsis;
						}
						&:last-child{
							font-size: 18rpx;
							opacity: 0.6;
							margin-top: 6rpx;
							white-space: nowrap;
							width: 100%; 
							overflow: hidden;
							text-overflow:ellipsis;
						}
					}
				}
				&:last-child{
					opacity: 0.6;
				}
			}
		}
	}
	 
</style>